<template>
    <h3>ComponentB</h3>
    <p>{{ title }}</p>
    <p>{{ age }}</p>
    <p v-for="(name,index) in names" key="index">{{ name }}</p>
    <button @click="updated">修改数据</button>
</template>
<script>
    export default {
        data(){
            return{

            }
        },
        //注意：props是只读的，不能修改！
        props: {
            title:{
                //校验父组件传来的参数是不是字符串类型或者数字类型或者数组类型
                type:[String,Number,Array],
                //required:true表示必须传递参数,不传参数会报错
                required:true
            },
            age:{
                //校验父组件传来的参数是不是数字类型
                type:Number,
                //设置默认值
                //当父组件没有传递参数的时候，使用默认值
                default:0
            },
            //数字和字符串的默认值可以直接使用default，但是数组和对象必须用工厂函数返回默认值
            names:{
                type:Array,
                default(){
                    return["空"]
                }
            }

        },
        methods:{
            updated() {
                //错误操作，不允许修改父元素传递过来的参数
                //this.title  = "新标题"
            },
        }
    }
</script>